<template>
    <div class="valite">
        <div class="mian">
            <img src="../../common/image/change_phone.png" alt="">
            <div class="input_box">
                <input type="text" name="phone_nums" v-on:input="phoneVal" placeholder="请输入手机号码">
                <p>
                    <input type="text" name="code" placeholder=" 请输入验证码" v-on:input="codeVal">
                    <button type="button" id="send">发送验证码</button>
                </p>
            </div>
            <button type="button" @click="phone_ok" style="letter-spacing: 8px;">确定</button>
        </div>
    </div>
</template>

<script>
    import { MessageBox,Toast } from 'mint-ui';
    export default {
        component:{
            MessageBox,
            Toast
        },
        methods:{
            phoneVal(e){
                let phone_nums = document.querySelector('input[name=phone_nums]');
                let send = document.querySelector('#send');
                if(!(/^1(3|4|5|7|8)\d{9}$/.test(e.target.value))){
                    send.style.backgroundColor = 'gainsboro';
                    send.style.color = '#303030';
                }else{
                    phone_nums.style.borderBottomColor = 'gainsboro';
                    phone_nums.className = '';
                    send.style.backgroundColor = '#05c';
                    send.style.color = '#fff';
                }
            },
            codeVal(e){
                let code = document.querySelector('input[name=code]');
                let input_box = document.querySelectorAll('.input_box')[0];
                let send = document.querySelector('#send');
                if(e.target.value == ''){
                    input_box.style.borderBottomColor = 'red';
                    code.className = 'active_no';
                }else{
                    input_box.style.borderBottomColor = 'gainsboro';
                    code.className = '';
                }

            },
            phone_ok(){
                let phone_nums = document.querySelector('input[name=phone_nums]');
                let code = document.querySelector('input[name=code]');
                let input_box = document.querySelectorAll('.input_box')[0];
                let send = document.querySelector('#send');

                if(phone_nums.value != '' && code.value != ''){
                    MessageBox.alert('操作成功').then(action => {
                        this.$router.push('/personal_details' + '##' + phone_nums.value);
                    });
                }else {
                    if(phone_nums.value == ''){
                        Toast({
                            message: '请输入手机号码',
                            position: 'bottom',
                            duration: 5000
                        });
                        if(!(/^1(3|4|5|7|8)\d{9}$/.test(phone_nums.value))){
                            phone_nums.style.borderBottomColor = 'red';
                            phone_nums.className = 'active_no';
                            send.style.backgroundColor = 'gainsboro';
                            send.style.color = '#303030';
                        }else{
                            phone_nums.style.borderBottomColor = 'gainsboro';
                            phone_nums.className = '';
                            send.style.backgroundColor = '#05c';
                            send.style.color = '#fff';
                        }
                    }else if(code.value == ''){
                        input_box.style.borderBottomColor = 'red';
                        code.className = 'active_no';
                        Toast({
                            message: '请输入验证码',
                            position: 'bottom',
                            duration: 5000
                        });
                    }
                }

            }
        }
    }
</script>

<style scoped lang="scss">
      .valite{
          text-align: center;
          width: 100%;
          overflow: hidden;
          .head_tool{
              padding: 20px;
              background: #303030;
              color: #fff;
              height: 40px;
              font-size: 32px;
              span:first-child{
                  float: left;
                  transform: scaleY(1.8);
                  margin-top: 6px;
              }
          }
          .mian{
              margin: 20% 0;
              padding: 0 5%;
              div{
                  width: 100%;
                  margin: 20px 0;
                  font-size: 28px;
                  border-bottom: 1px solid gainsboro;
                  overflow: hidden;
                  input{
                      width: 100%;
                      height: 80px;
                      line-height: 80px;
                      padding: 10px;
                      text-indent: 30px;
                      font-size: 30px;
                      border-bottom: 1px solid gainsboro;
                  }
                  p{
                      width: 100%;
                      height: 100px;
                      line-height: 80px;

                      margin-top: 20px;
                      input{
                          float: left;
                          width: 55%;
                          text-indent:30px;
                          font-size: 30px;
                          background: transparent;
                          border: transparent;
                      }
                      button{
                          float: right;
                          width: 220px;
                          margin-right: 50px;
                          background: #eee;
                          color: #303030;
                          font-size: 26px;
                          margin-top: 0;
                          font-size: 30px;
                      }
                  }
              }
              img{width: 40%;}
              button{
                  color: #fff;
                  background: #05c;
                  width: 70%;
                  height: 80px;
                  line-height: 80px;
                  border: none;
                  border-radius: 5px;
                  font-size: 30px;
                  margin-top: 30px;
                  font-size: 38px;
              }
          }
      }
</style>
<style>
    .mint-msgbox-title,.mint-msgbox-message,.mint-msgbox-btn{font-size: 30px;padding: 20px 0;}
    .mint-msgbox-btns{height: 1.4rem;}
    .mint-toast-text{font-size: 30px;padding: 10px;}
    .active_no::-webkit-input-placeholder{color:red;}
</style>
